{include file="common/head"/}
<style>
    #se{
        margin-top: 10px;
        border-bottom: 1px solid #ccc;
    }
    .tl{
        display: inline-block;
        width: 50px;
        text-align: center;
        line-height: 45px;
        float: left;
    }
    .sul{
        float: left;
    }
    .sul li{
        float: left;
        height: 100%;
        line-height: 45px;
        font-size: 16px;
        padding: 0 10px;
        cursor: pointer;
    }
    .state{
        height: 45px;
    }
    .sul li:hover{
        background-color: #f1f1f1;
    }
    .lied{
        background-color: #ccc !important;
    }
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>出借记录</legend>
    </fieldset>
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" name="key" id="key" placeholder="{:lang('pleaseEnter')}编号或关键字">
        </div>
        <button class="layui-btn" id="search" data-type="reload">{:lang('search')}</button>
        <!--<a href="{:url('queryPage')}" class="layui-btn">显示全部</a>-->
        <button type="button" class="layui-btn layui-btn-normal" id="lend">出借</button>
    </div>

    <div id="se">

        <div class="state">
            <span class="tl">状态:</span>
            <ul class="sul">
                <li class="lied" val="0">全部</li>
                <li val="40">借用中</li>
                <li val="41">归还中</li>
                <li val="42">归还完毕</li>
            </ul>
        </div>

    </div>

    <table class="layui-table" id="list" lay-filter="list"></table>
</div>
{include file="common/foot"/}
<script type="text/html" id="option">

    {{# if(d.state_id==40 && gid==8 && d.is_ver==1){ }}

    <a class="layui-btn layui-btn-xs" lay-event="retu" >归还</a>

    {{# }else if(d.state_id==41 && gid==8 && d.is_ver==1){  }}

    <a class="layui-btn layui-btn-xs" lay-event="retu">继续归还</a>

    {{# } }}

    <a class="layui-btn layui-btn-xs" lay-event="list">借用列表</a>

    {{# if( d.is_ver==0 && d.state_id != 43){ }}

    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">作废</a>

    {{# } }}

</script>

<script type="text/html" id="state">
    {{# if(d.state_id==33 ){ }}
    <span style="color: red"> {{d.state_name}}</span>
    {{# }else if(d.state_id==34){  }}
    <span style="color: red"> {{d.state_name}}</span>
    {{# }else{  }}
    <span style="color: #00B83F"> {{d.state_name}}</span>
    {{# } }}
</script>

<script type="text/html" id="ver">
    {{# if(d.is_ver==0){ }}
    <span style="color: red"> 借用人未审核</span>
    {{# }else{  }}
    <span style="color: #00B83F"> 已审核</span>
    {{# } }}
</script>

<script>
    var gid = '{:session("gid")}';
    layui.use('table', function() {
        var table = layui.table, $ = layui.jquery;
        var tableIn = table.render({
            id: 'works',
            elem: '#list',
            url: '{:url("queryPage")}',
            method: 'post',
            page: true,
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', title: '{:lang("id")}', width: 80,fixed: true},
                {field: 'out_name', title: '出借人', width: 120},
                {field: 'input_name', title: '借用人', width: 120},
                {field: 'lend_time', title: '出借日期', width: 180},
                {field: 'desc', title: '备注', width: 180},
                {field: 'is_ver', title: '审核', width: 120,toolbar:'#ver'},
                {field: 'state_name', title: '状态', width: 120,toolbar:'#state'},
                {width: 180, align: 'center', toolbar: '#option'}
            ]],
            limit: 10 //每页默认显示的数量
        });
        //搜索
        $('#search').on('click', function () {
            var key = $('#key').val();
            if ($.trim(key) === '') {
                layer.msg('{:lang("pleaseEnter")}关键字！', {icon: 0});
                return;
            }
            tableIn.reload({
                where: {key: key}
            });
        });

        //筛选
        $('.sul').on('click','li',function () {
            var sid = $(this).attr('val');
            if($(this).attr('class') == 'lied'){
                return;
            }
            $(this).addClass('lied').siblings('li').removeClass('lied');
            if(sid=='0') sid = '';
            tableIn.reload({
                where: {state_id: sid}
            });
        });

        table.on('tool(list)', function(obj) {
            var data = obj.data;
            if (obj.event === 'list') {
                var str = '<div style="margin: 5px 15px"><table class="layui-table" style="text-align: center">';
                str += '<thead><tr><th>工具</th><th>归还人</th><th>归还日期</th><th>工具状态</th><th>归还状态</th><th>备注</th></tr></thead>';

                str += '<tbody id="dataRec"></tbody>';
                str += '</table>';
                str += '<div id="page_rec" style="text-align: center"></div></div>';

                layer.open({
                    title:'借用列表',
                    area:['800px','650px'],
                    content:str,
                    type:1,
                    maxmin: true,
                    success:function (lay,index) {

                        $.post('{:url("toolsList")}',{id:data.id},function (res) {

                            var tr = '';
                            $.each(res.data,function (k,v) {
                                tr = '<tr>';
                                tr += '<td>'+v.tools_name+'</td>';
                                tr += '<td>'+(v.return_name?v.return_name:'')+'</td>';
                                tr += '<td>'+(v.return_time?v.return_time:'')+'</td>';
                                tr += '<td>'+v.state_name+'</td>';
                                tr += '<td>'+(v.is_return==0?'<span style="color: red">未归还</span>':'<span style="color: green">已归还</span>')+'</td>';
                                tr += '<td>'+(v.desc?v.desc:'')+'</td>';
                                tr += '</tr>';
                                $('#dataRec').append(tr);
                            });

                        });
                    }
                });
            } else if(obj.event == 'retu'){
                location.href = '{:url("revertUI")}?id='+data.id;
            }else if(obj.event == 'del'){
                layer.confirm('确认要作废该出借单吗？', {icon: 3}, function(index) {

                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('toVoid')}", {lend_id: data.id}, function (data) {
                        layer.close(loading);
                        if (data.code === 1) {
                            layer.msg(data.msg, {time: 1000, icon: 1});
                            tableIn.reload();
                        } else {
                            layer.msg(data.msg, {time: 1000, icon: 2});
                        }
                    });
                });

            }
        });
        $('#delAll').click(function(){
            layer.confirm('确认要关闭选中的工单吗？', {icon: 3}, function(index) {
                layer.close(index);
                var checkStatus = table.checkStatus('works'); //test即为参数id设定的值
                var ids = '';
                $(checkStatus.data).each(function (i, o) {
                    ids += o.id+',';
                });

                var loading = layer.load(1, {shade: [0.1, '#fff']});
                $.post("{:url('close')}", {ids: ids}, function (data) {
                    layer.close(loading);
                    if (data.code === 1) {
                        layer.msg(data.msg, {time: 1000, icon: 1});
                        tableIn.reload();
                    } else {
                        layer.msg(data.msg, {time: 1000, icon: 2});
                    }
                });
            });
        });

        $('#lend').click(function () {
            location.href = '{:url("outLendUI")}';
        });
    });
</script>